import React, { useState, useEffect, useRef } from 'react';
import { SearchOutline, DownFill } from 'antd-mobile-icons';
import { useSearchParams, useNavigate } from "react-router-dom";
// import { InfiniteScroll } from 'antd-mobile'
import './success.scss'
import BookItem from '../../components/BookItem/BookItem';
import useTouchBottom from "../../hooks/useTouchBottom/index";
function BookSuccess(props) {
   let data = [{ "state": true, "title": "综合排行" },
   { "state": false, "title": "全部频道" },
   { "state": false, "title": "筛选" }]
   // 
   // let tempTitle = searchParams.get('title');
   // value
   const [searchParams, setSearchParams] = useSearchParams();
   // 初始化
   const [title, setTitle] = useState(searchParams.get('title'));
   // 数据
   const [arr, setArr] = useState([]);
   let searchData = useRef([]);
   // 无限加载  是否还有更多内容
   // const [hasMore, setHasMore] = useState(true)
   // const [mask, setMask] = useState(true)
   // const [page, setPage] = useState(1)
   const num = useRef(1)
   // console.log('title', title);
   // 获取数据
   useEffect(() => {
      // console.log('-----', page);
      React.axios.get('search/book.json', {
         params: { keyword: title },
      }).then(res => {
         // console.log(res);
         setArr(res.books)
         searchData.current = res.books
      })
   }, [title]);

   // let tempFun = (k) => {
   //    console.log(k);
   //    // setArr({...arr,[item.state]:true})
   // }
   // 
   let keyEnter = (e) => {
      if (e.nativeEvent.keyCode === 13) {
         // console.log('enter', e.target.value);
         setTitle(e.target.value)
      }
   }
   let maskFun = () => {
      // console.log( num.current++ );
      // setPage(num.current)
      let tempNum = num.current++
      React.axios.get('search/book.json', {
         params: { keyword: title, page: tempNum },
      }).then(res => {
         // console.log('return---', tempNum, searchData.current, res.books);
         searchData.current = searchData.current.concat(res.books)
         setArr([...searchData.current])
      })
   }
   // 触底加载
   // async function loadMore() { 
   //    const append = await maskFun()
   //    // setArr(arr => [...arr, ...append])
   //    // setHasMore(append.length > 0)
   //    // console.log('----', page,append);
   // }
   useTouchBottom(maskFun)

   return arr && (
      <div className='success'>
         {/* 头部 */}
         <div className="search">
            <div className='hd_nav'>
               <div className="nav_in">
                  <input className='input' type="text"
                     onKeyUp={(e) => keyEnter(e)}
                     placeholder={title}
                  />
                  <div className="in_icon">
                     <SearchOutline fontSize={22} color="#999" />
                  </div>
               </div>
               <span className="nav_txt" onClick={() => window.history.back(-1)}>取消</span>
            </div>
         </div>
         {/* param  */}
         {/* 渲染数据 */}

         <ul className='book_list'>
            {arr.map((item, index) => (
               <BookItem key={index} book={item} width={22}></BookItem>
            ))}
         </ul>
         {/*  */}
         {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
      </div>
   );
}

export default BookSuccess;